<template>
	<view>
		<view class="top-play">
			<view class="info u-flex">
				<image :src="detail.cover"></image>
				<view class="u-flex-1" style="overflow: hidden;">
					<view class="title u-line-1">第{{info.classNo}}节 {{info.className}}</view>
					<view class="sku u-line-3">{{info.description}}</view>
<!-- 					<view class="hit">播放量：666</view> -->
				</view>
			</view>
			<audio-com :control="!1" :src="src"></audio-com>
		</view>
		
		
		<view class="content">
			<view class="co-list">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="chapter u-flex">
						<text class="u-line-1">第{{item.chapterNo}}章  {{item.chapterName}}</text>
						<!-- <image src=""></image> -->
					</view>
					<view class="children" v-for="(item2,index2) in item.class" :key="index2" @click="children(item2)">
						<view class="title u-flex">
							<text>第{{item2.classNo}}节 {{item2.className}}</text>
							<image src="/static/icon2/lock.png" v-if="!item2.buy && !item2.free"></image>
						</view>
						<text class="free" v-if="item2.free">免费</text><text class="time">{{item2.timeLong}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" @confirm="goBack" content="购买后可解锁全部课" confirm-text="确定" confirm-color="#DF7B5A" :show-title="!1"></u-modal>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				class_id:'',//小节id
				info:'',//小节信息
				detail:'',//课程详情
				list:'',//章节列表
				src:'',
				show:!1
			}
		},
		methods: {
			getSection(first){
				this.$u.api.courseSection({
					class_id:this.class_id
				}).then(res=>{
					this.class_id = res.id
					this.info = res
					this.src = res.link
					// 第一次进入
					first && this.$u.api.courseDetail({
						course_id:res.courseId
					}).then(res=>{
						this.detail = res
					})
					first && this.$u.api.courseChapter({
						course_id:res.courseId
					}).then(res=>{
						this.list = res
					})
					
				})
			},
			children(item){
				if(!item.buy && !item.free){
					this.show = !0
					return
				}
				this.class_id = item.id
				this.getSection()
			},
			goBack(){
				this.$app.back()
			}
		},
		onLoad(o) {
			this.class_id = o.id
			this.getSection(!0)
		}
	}
</script>

<style lang="scss">
	.top-play{position: sticky;top: 0;background-color: #fff;z-index: 89;}
	
	.info{
		padding: 30rpx;
		image{width: 160rpx;height: 160rpx;border-radius: 20rpx;display: block;flex-shrink: 0;margin-right: 22rpx;}
		.title{font-weight: bold;font-size: 28rpx;line-height: 40rpx;height: 40rpx;}
		.sku{font-size: 26rpx;color: #555;line-height: 40rpx;height: 120rpx;}
		.hit{font-size: 26rpx;color: #555;}
	}
	
	.content{
		padding: 20rpx 60rpx;
	}
	.co-list{
		.item{
			.chapter{
				justify-content: space-between;height: 72rpx;
				text{font-size: 30rpx;font-weight: bold;}
				image{width: 30rpx;height: 34rpx;display: block;flex-shrink: 0;margin-right: 10rpx;}
			}
			.children{
				background-color: #f7f7f7;border-radius: 20rpx;position: relative;padding: 20rpx;margin-bottom: 20rpx;
				&:last-child{margin-bottom: 0;}
				image{display: block;width: 31rpx;height: 34rpx;flex-shrink: 0;margin-left: 10rpx;}
				.free{color: $tc;font-size: 22rpx;padding-right: 14rpx;}
				.title{justify-content: space-between;
					text{display: block;word-break: break-all;text-align: justify;}
				}
				.time{font-size: 22rpx;color: #555;}
			}
		}
	}
</style>
